<template>
	<scroll-view scroll-y class="container">
		<view class="content-wrap">
			<view class="content-item">
				<view class="goods">
					<label class="act"><text class="iconfont icon-danxuan-weixuan"></text></label>
					<view class="good">
						<view class="img-wrapper"><image src="/static/images/home/goods1.jpg" mode=""></image></view>
						<view class="good-content">
							<view class="good-title text-line">意大利孟爵Monge 单一肉食系列火鸡肉泥 成犬狗罐头150g 100%火鸡肉</view>
							<view class="spec">
								<view class="spec1"><text class="name ellipsis">大包</text></view>
							</view>
							<view class="good-desc">
								<view class="good-price">
									<text>￥</text>
									151
								</view>
								<number-box :min="1" :source="'cart'" :max="999" :step="1" @change="numberChange"></number-box>
							</view>
						</view>
					</view>
				</view>
			<view class="goods">
					<label class="act"><text class="iconfont icon-danxuan-weixuan"></text></label>
					<view class="good">
						<view class="img-wrapper"><image src="/static/images/home/goods1.jpg" mode=""></image></view>
						<view class="good-content">
							<view class="good-title text-line">意大利孟爵Monge 单一肉食系列火鸡肉泥 成犬狗罐头150g 100%火鸡肉</view>
							<view class="spec">
								<view class="spec1"><text class="name ellipsis">大包</text></view>
							</view>
							<view class="good-desc">
								<view class="good-price">
									<text>￥</text>
									151
								</view>
								<number-box :min="1" :source="'cart'" :max="999" :step="1" @change="numberChange"></number-box>
							</view>
						</view>
					</view>
				</view>	<view class="goods">
					<label class="act"><text class="iconfont icon-danxuan-weixuan"></text></label>
					<view class="good">
						<view class="img-wrapper"><image src="/static/images/home/goods1.jpg" mode=""></image></view>
						<view class="good-content">
							<view class="good-title text-line">意大利孟爵Monge 单一肉食系列火鸡肉泥 成犬狗罐头150g 100%火鸡肉</view>
							<view class="spec">
								<view class="spec1"><text class="name ellipsis">大包</text></view>
							</view>
							<view class="good-desc">
								<view class="good-price">
									<text>￥</text>
									151
								</view>
								<number-box :min="1" :source="'cart'" :max="999" :step="1" @change="numberChange"></number-box>
							</view>
						</view>
					</view>
				</view>	<view class="goods">
					<label class="act"><text class="iconfont icon-danxuan-weixuan"></text></label>
					<view class="good">
						<view class="img-wrapper"><image src="/static/images/home/goods1.jpg" mode=""></image></view>
						<view class="good-content">
							<view class="good-title text-line">意大利孟爵Monge 单一肉食系列火鸡肉泥 成犬狗罐头150g 100%火鸡肉</view>
							<view class="spec">
								<view class="spec1"><text class="name ellipsis">大包</text></view>
							</view>
							<view class="good-desc">
								<view class="good-price">
									<text>￥</text>
									151
								</view>
								<number-box :min="1" :source="'cart'" :max="999" :step="1" @change="numberChange"></number-box>
							</view>
						</view>
					</view>
				</view>	<view class="goods">
					<label class="act"><text class="iconfont icon-danxuan-weixuan"></text></label>
					<view class="good">
						<view class="img-wrapper"><image src="/static/images/home/goods1.jpg" mode=""></image></view>
						<view class="good-content">
							<view class="good-title text-line">意大利孟爵Monge 单一肉食系列火鸡肉泥 成犬狗罐头150g 100%火鸡肉</view>
							<view class="spec">
								<view class="spec1"><text class="name ellipsis">大包</text></view>
							</view>
							<view class="good-desc">
								<view class="good-price">
									<text>￥</text>
									151
								</view>
								<number-box :min="1" :source="'cart'" :max="999" :step="1" @change="numberChange"></number-box>
							</view>
						</view>
					</view>
				</view>	<view class="goods">
					<label class="act"><text class="iconfont icon-danxuan-weixuan"></text></label>
					<view class="good">
						<view class="img-wrapper"><image src="/static/images/home/goods1.jpg" mode=""></image></view>
						<view class="good-content">
							<view class="good-title text-line">意大利孟爵Monge 单一肉食系列火鸡肉泥 成犬狗罐头150g 100%火鸡肉</view>
							<view class="spec">
								<view class="spec1"><text class="name ellipsis">大包</text></view>
							</view>
							<view class="good-desc">
								<view class="good-price">
									<text>￥</text>
									151
								</view>
								<number-box :min="1" :source="'cart'" :max="999" :step="1" @change="numberChange"></number-box>
							</view>
						</view>
					</view>
				</view>	<view class="goods">
					<label class="act"><text class="iconfont icon-danxuan-weixuan"></text></label>
					<view class="good">
						<view class="img-wrapper"><image src="/static/images/home/goods1.jpg" mode=""></image></view>
						<view class="good-content">
							<view class="good-title text-line">意大利孟爵Monge 单一肉食系列火鸡肉泥 成犬狗罐头150g 100%火鸡肉</view>
							<view class="spec">
								<view class="spec1"><text class="name ellipsis">大包</text></view>
							</view>
							<view class="good-desc">
								<view class="good-price">
									<text>￥</text>
									151
								</view>
								<number-box :min="1" :source="'cart'" :max="999" :step="1" @change="numberChange"></number-box>
							</view>
						</view>
					</view>
				</view>	<view class="goods">
					<label class="act"><text class="iconfont icon-danxuan-weixuan"></text></label>
					<view class="good">
						<view class="img-wrapper"><image src="/static/images/home/goods1.jpg" mode=""></image></view>
						<view class="good-content">
							<view class="good-title text-line">意大利孟爵Monge 单一肉食系列火鸡肉泥 成犬狗罐头150g 100%火鸡肉</view>
							<view class="spec">
								<view class="spec1"><text class="name ellipsis">大包</text></view>
							</view>
							<view class="good-desc">
								<view class="good-price">
									<text>￥</text>
									151
								</view>
								<number-box :min="1" :source="'cart'" :max="999" :step="1" @change="numberChange"></number-box>
							</view>
						</view>
					</view>
				</view>
			
			</view>
		</view>
		<view class="total-wrap">
			<view class="total-left">
				<label class="act">
					<text class="iconfont icon-danxuan-weixuan"></text>
					全选
				</label>

				<view class="total-con">
					<view class="top-con">
						合计:
						<text class="symbol">￥</text>
						<text class="total">15555</text>
					</view>
				</view>
			</view>

			<view class="total-right">购买</view>
		</view>
	</scroll-view>
</template>

<script>
import numberBox from '@/components/numberbox/numberbox.vue';
export default {
	components: {
		numberBox
	},
	data() {
		return {};
	},
	onLoad() {},

	methods: {
		numberChange() {}
	}
};
</script>

<style lang="scss">
page {
	width: 100%;
	height: calc(100% - 110upx);
	background: #f5f5f5;
	.container {
		width: 100%;
		height: 100%;
		overflow: hidden;
		.header {
			position: relative;
			width: 100%;
			height: 360upx;
			background: #fc7827;
			background-size: cover;
			overflow: hidden;
			/*  #ifndef  APP-PLUS  */
			height: 280upx;
			background-size: 100% 100%;

			/*  #endif  */
			.title-contents {
				position: fixed;
				top: 0;
				width: 100%;
				height: calc(var(--status-bar-height) + 88upx);
				z-index: 100008;

				.top-view {
					width: 100%;
					height: var(--status-bar-height);
					background: #fc7827;
				}

				.titles {
					display: flex;
					flex-direction: row;
					height: 88upx;
					background: #fc7827;

					.titleLeftButton {
						width: 88upx;
						height: 88upx;
						line-height: 88upx;
						text-align: center;

						image {
							width: 40upx;
							height: 40upx;
						}
					}

					.titleText {
						width: 574upx;
						line-height: 88upx;
						text-align: center;
						font-size: 36upx;
						color: #fff;
					}

					.titleRightButton {
						width: 88upx;
						height: 88upx;
						line-height: 88upx;
						text-align: center;
						font-size: 32upx;
						color: #fff;
					}
				}
			}
		}

		.content-wrap {
margin-top: 20upx;
			margin-left: 24upx;
			width: 702upx;
			//
			.content-item {
				margin-bottom: 20upx;
				border-radius: 20upx;
				background: #fff;
			}

			.goods {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20upx;

				&:last-child {
					margin-top: 0;
				}

				label {
					margin-left: 20upx;
					line-height: 214upx;
					.iconfont {
						font-size: 46upx;
						color: #bbb;
					}
					&.act .iconfont {
						color: $theme-color;
						&::before {
							content: '\e617';
						}
					}
				}

				.good {
					display: flex;
					justify-content: space-between;
					width: 624upx;
					padding: 20upx 0 0; 
					box-sizing: border-box;
					border-bottom: 1px solid #eee;
					.img-wrapper {
						width: 180upx;
						height: 180upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.good-content {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 440upx;
						height: 180upx;
						padding: 0 20upx;
						box-sizing: border-box;

						.good-title {
							font-size: 28upx;
							color: #111;
						}

						.spec {
							display: flex;
							flex-direction: row;

							.spec1 {
								display: flex;
								flex-direction: row;
								align-items: center;
								padding: 0 16upx;
								box-sizing: border-box;
								width: 100%;
								height: 40upx;
								border-radius: 8upx;
								//

								.name {
									display: inline-block;
									// width: 85%;
									padding: 0 15upx;
									line-height: 40upx;
									font-size: 24upx;
									color: #666;
									background: #f6f6f6;
								}

								.iconfont {
									color: #999;
								}
							}
						}

						.good-desc {
							display: flex;
							justify-content: space-between;

							.good-price {
								line-height: 38upx;
								color: #fb5248;
								font-size: 30upx;
							}
						}
					}
				}
			}
		}

		.total-wrap {
			position: fixed;
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			background: #fff;
			z-index: 9;
			/*  #ifndef  H5  */
			bottom: 0px;
			/*  #endif  */
			/*  #ifdef  H5  */
			bottom: 50px;
			/*  #endif  */

			.total-left {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-left: 20upx;
				width: 490upx;
				height: 100%;
				color: #333;
				box-sizing: border-box;

				label {
					font-size: 28upx;
					display: flex;
					align-items: center;
					.iconfont {
						font-size: 46upx;
						color: #bbb;
						margin-right: 5px;
					}
					&.act .iconfont {
						color: $theme-color;
						&::before {
							content: '\e617';
						}
					}
				}

				.total-con {
					display: flex;
					flex-direction: column;
					margin-right: 20upx;
					.top-con {
						display: flex;
						flex-direction: row;
						line-height: 100upx;
						font-size: 30upx;
						color: #333;
						.freight {
							margin-right: 16upx;
							font-size: 22upx;
							color: #999;
						}
						.symbol {
							font-size: 24upx;
							color: #fc511f;
						}

						.total {
							color: #fc511f;
						}
					}
					.bottom-con {
						display: flex;
						flex-direction: row;
						line-height: 36upx;
						font-size: 22upx;
						.discounts {
							color: #fb5248;
							margin-right: 16upx;
						}
						.detail {
							color: #666;
						}
						.iconfont {
							font-size: 14px;
						}
					}
				}
			}

			.total-right {
				width: 200upx;
				height: 80upx;
				line-height: 80upx;
				margin-top: 10upx;
				margin-right: 20upx;
				background: #fc511f;
				color: #fff;
				text-align: center;
				font-size: 28upx;
				border-radius: 40upx;
			}
		}
		.mask {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 10009;
		}
		.mask-content {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 510upx;
			background: #fff;
			z-index: 10009;
			.head {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 0 25upx;
				box-sizing: border-box;
				height: 110upx;
				.title {
					position: relative;
					padding-left: 20upx;
					box-sizing: border-box;
					line-height: 110upx;
					font-size: 32upx;
					color: #010101;
					font-weight: bold;
					&::before {
						position: absolute;
						left: 0;
						top: 40upx;
						content: ' ';
						width: 6upx;
						height: 30upx;
						background: blue;
					}
					text {
						margin-left: 20upx;
						font-weight: normal;
						font-size: 24upx;
						color: #666;
					}
				}
				image {
					width: 30upx;
					height: 30upx;
				}
			}
			.holder {
				color: #999;
			}
			.list {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin: 0 auto;
				width: 700upx;
				height: 70upx;
				// border-bottom: 1px solid #eee;
				text {
					font-size: 28upx;
					color: blue;
					text {
						margin-left: 20upx;
						font-size: 24upx;
						color: #666;
					}
				}
			}
			.footer {
				position: absolute;
				bottom: 0;
				width: 100%;
				line-height: 94upx;
				color: blue;
				background: blue;
				text-align: center;
				font-size: 34upx;
			}
		}
	}
}
</style>
